<template>
  <div class="home_container">
      <!-- 头部logo和搜索 -->
      <div class="header">
        <header-search></header-search>
      </div>
      <div :class="['homeNav',isShow == true ? 'fl':'']">
        <home-nav></home-nav>
      </div>
      <!-- 导航组件 -->
      
      
      

      <router-view />
    </div>
</template>

<script>
import { initHomeData } from "@/request/api.js"
export default {
    name:"Home",
    data(){
      return{
        isShow:false
      }
    },
    components:{

    },
    created(){
      this.initData()
    },
    methods:{
      initData(){
        
       initHomeData().then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log("获取数据失败")
      })
      }
      
    },
    mounted(){
        document.addEventListener('scroll',()=>{
            if(window.pageYOffset >= 50){
              this.isShow = true
            }else{
              this.isShow = false
            }
        })
    },
    destroyed(){
      document.removeEventListener('scroll',document,false)
    }
};
</script>

<style lang="scss" scoped>
.home_container{
  padding-top: 100px;
  font-family:"webfont";
}
.header{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99999999;
}
.homeNav{
  position: fixed;
  width: 100%;
  top:50px;
  left: 0;
  z-index: 9999999;
  transition: all .3s ease;
}
.homeNav.fl{
  transform: translateY(-100%);
}
</style>
